<template>
	<scroll-view class="scrollView" scroll-y="true">
		<view class="goodsData">
			<view class="goodsTitle">{{goodsData.name}}</view>
			<view class="sellingPoint" v-show="goodsData.selling_point != ''">{{goodsData.selling_point}}</view>
			<view class="goodsBox">
				<swiper class="swiper-box" circular :interval="3000" autoplay>
					<swiper-item v-for="(item ,index) in goodsData.pics" :key="index">
						<view class="swiper-item">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="moneyBox">
				<text>￥</text>
				<text style="font-size:52rpx;font-weight: bold;margin-right: 15rpx;">{{goodsData.sell_price}}</text>
				<text class="originPrice" style="color:#838383;">￥{{goodsData.market_price}}</text>
				<text class="discount">{{goodsData.cost_price}}折</text>
			</view>
		</view>
		
		<view class="goodsData">
			<view class="goodsTips">
				<text class="tipsTitle">消费须知</text>
				<text class="tipsContent" v-if="goodsData.buy_notice == ''">周一至周日均可使用</text>
				<text class="tipsContent" v-else>{{goodsData.buy_notice}}</text>
			</view>
		
			<view class="goodsTips">
				<text class="tipsTitle">服务保障</text>
				<text class="tipsContent">随时退 · 过期自动退</text>
			</view>
		
			<view class="goodsTips">
				<text class="tipsTitle">有效时限</text>
				<text class="tipsContent" v-if="goodsData.effective_day > 0">购买后 {{goodsData.effective_day}} 天有效</text>
				<text class="tipsContent" v-else>购买后 永久 有效</text>
			</view>
		
			<view class="goodsTips">
				<text class="tipsTitle">店铺地址</text>
				<text class="tipsContent">{{goodsData.business.business_addr}}</text>
			</view>
		
			<view class="goodsTips" style="border:none;margin-bottom: 0;padding-bottom:15rpx;">
				<text class="tipsTitle">营业时间</text>
				<text class="tipsContent">{{goodsData.business.start_hours}} 至 {{goodsData.business.end_hours}}</text>
			</view>
		</view>
		
		<scroll-view class="reviewScrollView" scroll-y="true" v-if="reviewList.length > 0" @scrolltolower="lower">
			<view class="reviewTitle">用户评论</view>
			<view class="reviewBox" v-for="(item,index) in reviewList" :style="index < (reviewList.length - 1) ? '':'border:none;'">
				<view class="userInfo">
					<view class="reviewImage"><image :src="item.headimg" mode="aspectFit"></image></view>
					<view class="reviewInfo">
						<view class="userInfo">
							<text>{{item.nickname}}</text>
							<text style="margin-left:auto">{{item.createtime}}</text>
						</view>
						<view class="userInfo">
							<uv-rate count="5" v-model="item.score" size="14" readonly></uv-rate>
							<text style="margin-left:20rpx;">{{item.reply_content}}</text>
						</view>
					</view>
				</view>
				<view class="review">{{item.content}}</view>
			</view>
		</scroll-view>
		
		<view class="payBox" @click="goto" :data-url="'/pagesZ/sameCity/generateOrder?id='+goodsData.id">立即抢购</view>
		<loading v-if="loading"></loading>
	</scroll-view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				loading:true,
				opt:{},
				goodsData:{},
				current: 0,
				reviewList:[],//评论列表
				page: 1, //当前页
				total_page: 0, //总页数
				per_page:10,//每页条数
			}
		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getDataFun();
			this.getReviewFun();
		},

		methods: {
			//获取商品详情
			getDataFun(){
				let _this = this;
				app.get('ApiBusinessProduct/details', {id:_this.opt.id}, function (res) {
					_this.loading = false;
					if (res.status == 0) {
						app.alert(res.msg);
						return;
					}else{
						res.data.cost_price = ((res.data.sell_price / res.data.market_price) * 10).toFixed(1);//将后台传过来的成本价转换为折扣
						_this.goodsData = res.data;
					}
				});
			},
			
			// 滚动到底部
			lower() {
				if (this.page < this.total_page) {
					this.page++;
					this.getReviewFun();
				}
			},	
			
			//获取商品评论
			getReviewFun(){
				let _this = this;
				app.get('ApiBusinessProduct/comment', {product_id:_this.opt.id,page:_this.page,per_page:_this.per_page}, function (res) {
					_this.loading = false;
					if (res.status == 0) {
						app.alert(res.msg);
						return;
					}else{
						let list = res.data.comment.data;
						list.forEach(item=>{
							if(item.score == 1){item.reply_content = '非常差'};
							if(item.score == 2){item.reply_content = '差'};
							if(item.score == 3){item.reply_content = '一般'};
							if(item.score == 4){item.reply_content = '满意'};
							if(item.score == 5){item.reply_content = '非常满意'};
							_this.reviewList.push(item);
						})
						_this.total_page = res.data.comment.last_page;
					}
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
	
	.scrollView{
		width:100%;
		height:calc(100vh - 130rpx);
	}

	.originPrice {
		text-decoration: line-through;
		margin-top: 10rpx;
	}

	.goodsData {
		width: 92%;
		float: left;
		margin: 30rpx 4% 0 4%;
		padding: 20rpx 0;
		/* padding:20rpx; */
		border-radius: 15rpx;
		background-color: #fff;
	}

	.goodsTitle {
		width: 92%;
		float: left;
		margin: 0 4%;
		font-weight: bold;
		color: #222222;
		font-size: 32rpx;
	}

	.goodsBox {
		width: 94%;
		text-align: center;
		margin: 20rpx 3% 20rpx 3%;
		float: left;
		height: 400rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.goodsBox image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	
	.swiper-box{
		width: 100%;
		height: 400rpx;
		border-radius: 10rpx;
	}
	
	.swiper-item {
		width: 100%;
		height: 100%;
		float: left;
	}
	
	.swiper-item image {
		border-radius: 10px;
		width: 100%;
		height: 100%;
	}

	.moneyBox {
		width: 94%;
		float: left;
		margin: 0 3%;
		display: flex;
		font-size: 26rpx;
		align-items: center;
	}

	.moneyBox text {
		color: #ff3333;

	}

	.moneyBox del {
		color: #838383;
	}

	.discount {
		font-size: 26rpx;
		padding: 0 7rpx;
		border-radius: 8rpx;
		border: 1px solid red;
		margin-left: auto;
	}

	.goodsTips {
		width: 92%;
		float: left;
		margin: 20rpx 4% 20rpx 4%;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f7f7f7;
	}

	.tipsTitle {
		margin-right: 50rpx;
		color: #5a5a5a;
		font-weight: bold;
		font-size: 28rpx;
	}

	.tipsContent {
		font-size: 26rpx;
		color: #959595;
	}
	
	.reviewScrollView{
		width: 92%;
		float: left;
		margin: 30rpx 4% 0 4%;
		padding-top: 20rpx;
		border-radius: 15rpx;
		background-color: #fff;
		height: 600rpx;
	}
	
	.reviewTitle{
		width: 94%;
		float:left;
		margin:0 3%;
		font-size:28rpx;
		font-weight: bold;
	}
	
	.reviewBox{
		width:94%;
		float:left;
		font-size:26rpx;
		margin:20rpx 3% 0 3%;
		border-bottom: 1px solid #ececec;
	}
	
	.review{
		width:98%;
		float:left;
		font-size:26rpx;
		margin:20rpx 1%;
	}
	
	.userInfo{
		width:100%;
		float:left;
		font-size:26rpx;
		display: flex;
		align-content:space-around;
	}
	
	.reviewImage{
		width:80rpx;
		height:80rpx;
		margin-right: 10rpx;
	}
	
	.reviewImage image{
		width:100%;
		height:100%;
		border-radius: 10rpx;
	}
	
	.reviewInfo{
		width:calc(100% - 90rpx);
		float:left;
		display: flex;
		flex-wrap:wrap;
	}

	.payBox {
		width: 90%;
		position: fixed;
		bottom: 35rpx;
		left: 5%;
		background-color: #ff3333;
		float: left;
		line-height: 75rpx;
		color: #fff;
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
		border-radius: 50px;
	}
	
	.sellingPoint{
		width:92%;
		float:left;
		margin:10rpx 4% 0 4%;
		color:#827d7d;
	}
	
</style>